<template>
 <el-form ref="formRef" :model="dynamicValidateForm" class="inputparamtermapping-dynamic">
    <el-row>
      <el-col :span="9">
        <el-form-item key="from" label="原数据"/>
      </el-col>
      <el-col :span="2">
        <el-form-item key="type" label="映射类型"/>
      </el-col>
      <el-col :span="1">
         <el-form-item key="value" label="数据值"/>       
      </el-col>
      <el-col :span="12">
        <el-form-item key="to" label="目标数据"/>
      </el-col>
    </el-row>
    <el-row :key='"paramtermap"+index' v-for="(mapitem, index) in dynamicValidateForm.paramtermap" >
      <el-col :span="9">
        <el-form-item key="from">
          <el-input v-model="mapitem.from" />
        </el-form-item>
      </el-col>
      <el-col :span="2">
        <el-form-item key="type">
          <el-input v-model="mapitem.type" />
        </el-form-item>
      </el-col>
      <el-col :span="1">
        <el-form-item key="value">
          <el-input v-model="mapitem.value" />
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item key="to">
          <el-input v-model="mapitem.to" />
        </el-form-item>
      </el-col>
      <el-col :span="2">
        <el-form-item key="delete">
          <el-button class="mt-2" @click.prevent="removeParamter(mapitem)">Delete</el-button>
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item>
      <el-button type="primary" @click="submitForm(formRef)">Submit</el-button>
      <el-button @click="addParamter">New paramter</el-button>
      <el-button @click="resetForm(formRef)">Reset</el-button>
    </el-form-item>
  </el-form>
</template>



<script lang="ts" setup>
import { reactive, ref, onMounted,onBeforeUpdate } from 'vue'
import type { FormInstance } from 'element-plus'

const formRef = ref<FormInstance>()
const dynamicValidateForm = reactive<{
  paramtermap: ParamterMapItem[]
}>({
  paramtermap: [
    {
      from: '',
      to: '',
      type:'',
      value:'',
    },
  ],
})

interface Props {
  inputparammapping: Map<String, Object>;
}

const props = withDefaults(defineProps<Props>(), {
  inputparammapping: ["inputparammap", []],
});


interface ParamterMapItem {
  from: string
  to: string
  type: string
  value: string
}

function prop2parammap(parameterlst) {

  for (const paramitem of parameterlst) {
    dynamicValidateForm.paramtermap.push(
      {
        from: paramitem['from'],
        type: paramitem['type'],
        to: paramitem['to'],
        value: paramitem['value'],
      });
  }


    // if (parameter['parameter'] != undefined) {
    //   for (const parameteritem of parameter['parameter']){
    //     prop2parammap(parameteritem)
    //   }
      
    // }
}

onMounted(() => {
  const inputparammap = props.inputparammapping.get("inputparammap")
  console.log(inputparammap)
  dynamicValidateForm.paramtermap = []
  prop2parammap(inputparammap["massage-bean-mapping"])
})

onBeforeUpdate(() => {
  const inputparammap = props.inputparammapping.get("inputparammap")
  console.log(inputparammap)
  dynamicValidateForm.paramtermap = []
  prop2parammap(inputparammap["massage-bean-mapping"])
})

const removeParamter = (item: ParamterItem) => {
  const index = dynamicValidateForm.paramtermap.indexOf(item)
  if (index !== -1) {
    dynamicValidateForm.paramtermap.splice(index, 1)
  }
}

const addParamter = () => {
  dynamicValidateForm.paramtermap.push({
      from: '',
      type: '',
      to:'',
      value:'',
  })
}

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!')
      return false
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

</script>

<style scoped>
.el-form-item{
    margin-bottom: 1.5px;
}
</style>